<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-05-08 16:34:13
 * @LastEditors: your name
 * @LastEditTime: 2024-05-08 16:40:27
-->
<template>
    <div id="cesium-viewer">
        <slot/>
    </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted,ref,markRaw } from "vue";
import {
    initViewer,
    setScene,
    loadTilesets,
    handleDefaultModelEffect,
    flyToDefaultView
} from "@/cesiumTools/sceneManager";
import {getLine} from '@/api/line'
import {useLineData} from '@/store'
import {renderLines,renderStation} from "@/cesiumTools/effectController"
const lineDataStore=useLineData()
//初始化cesium实例
Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODAzN2EzOS1kZDMzLTQ5Y2UtYjYxMi1jMzQxNTdiMTUzN2IiLCJpZCI6NDU5NDIsImlhdCI6MTYxNTYyNDQyOX0.BucgmI6OJ-7ixj7rcQ_Qyg45DkvdHmaLrFwyMYitLcI";

onMounted(async () => {
    const viewer = initViewer("cesium-viewer");
    setScene(viewer);
    flyToDefaultView(viewer)
    const modelUrls = [{
      url:"http://localhost:8888/wuhan/tileset.json",
      options:{}
    }]
    lineDataStore.setViewer(markRaw(viewer))
    // 加载线路数据
    const lineData = await getLine()
    lineDataStore.setData(markRaw(lineData))
    lineData.forEach(item => {
        renderLines(viewer,item)
        const color =item.color
        console.log(item)
        const stationsList = item.stationsList
        const options={
            color:color,
            name:'',
            positions:[],
        }
        stationsList.forEach(station => {
            options.positions=station.position
            options.name=station.name
            renderStation(viewer,options)
        })
    });
    // 加载多个3dtiles
    await loadTilesets(viewer,modelUrls,(tilesets)=>{
      handleDefaultModelEffect(tilesets[0])
      lineDataStore.setTileset(markRaw(tilesets[0]))
    })
});

</script>
<style>
#cesium-viewer {
    width: 100%;
    height: 100%;
    pointer-events: all;
}
</style>